<template>
  <div class="side-menu-wrapper">
    <Menu theme="dark" width="auto" :active-name="activeName" :class="menuitemClasses" @on-select="handleSelect">
      <template v-for="item in menuList">
        <template v-if="item.children">
          <Submenu :name="item.name" :key="`menu-${item.name}`">
            <template slot="title">
              <Icon :type="item.icon"></Icon>
              {{item.meta.title}}
            </template>
            <template v-for="itemChildren in item.children">
              <side-menu-item :key="`menu-${itemChildren.name}`" :parent-item="itemChildren"/>
            </template>
          </Submenu>
        </template>
        <template v-else>
          <side-menu-item :key="`menu-${item.name}`" :parent-item="item"/>
        </template>
      </template>
    </Menu>
  </div>
</template>

<script>
import sideMenuItem from './side-menu-item'
export default {
  name: 'side-menu',
  props: {
    isCollapsed: {
      type: Boolean
    },
    menuList: {
      type: Array,
      default () {
        return []
      }
    },
    activeName: {
      type: String,
      default: ''
    }
  },
  computed: {
    menuitemClasses () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  components: {
    sideMenuItem
  },
  methods: {
    handleSelect (name) {
      this.$emit('on-select', name)
    }
  }
}
</script>
